<template>
	<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

		<el-tab-pane label="基本资料" name="first">
			<div id="app1">
				<el-row>
					<el-col :span="2"></el-col>
					<el-col :span="8">
						<span style="">用户名:</span><span>{{you.user_name}}</span><br />
						<span>用户性别:</span><span>{{you.user_sex==1?'男':(you.user_sex==2?'女':'未知')}}</span><br />
						<span>用户身份:</span><span>{{you.use_sf==2?'管理员':'用户'}}</span><br />
					</el-col>
					<el-col :span="2"></el-col>
					<el-col :span="12">
						<span>用户邮箱:</span><span>{{you.user_email}}</span><br />
						<span>收藏数:</span><span>{{you.music_sc}}</span><br />
						<span>贴子数:</span><span>{{you.music_sl}}</span><br />
					</el-col>

				</el-row>
			</div>
		</el-tab-pane>



	</el-tabs>
</template>
<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import type { TabsPaneContext, UploadInstance } from 'element-plus'
	import axios from 'axios';
	import { ElMessage } from 'element-plus';

	const you = ref({
		music_sl: '',
		music_sc: '',
		user_id: '',
		user_name: '',
		user_sex: '',
		user_email: '',
		user_tx: '',
		use_sf: ''
	})
	const user = ref({
		user_id: ''
	})
	const doList2 = () => {
		try {
			user.value.user_id = window.location.search.split('?')[1].split('=')[1]
		} catch (e) {
			user.value.user_id = ''
		}
		axios({
			url: '/api/user/selectUser/' + user.value.user_id,
			method: 'get',
		}).then((response) => {
			you.value = response.data;
			// 跳转到用户信息页面
			console.log("赶回成功")
			console.log(response.data)

		})

	};





	const activeName = ref('first')

	//表格数据
	const tableData = ref([]);


	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}


	//个人信息













	//修改函数










	//验证函数








	// 获取上传组件实例
	const upload = ref<UploadInstance>()

	// 上传文件
	const submitUpload = () => {
		upload.value!.submit()
	}

	// 成功上传后的回调函数
	const handleSuccess = res => {
		user.user_tx = res;
		myIfm();
	}




	//JZ
	onMounted(() => {
		doList2()
	});
</script>

<style>
	.demo-tabs>.el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;
	}

	.tip {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#app1 {
		margin-top: 100px;
		width: 1100px;
		height: 200px;
		background-color: rgba(250, 235, 215, 0.5);
		margin-left: 100px;
	}

	#app1 span {
		color: gray;
	}
</style>